<template>
  <div class="card-container">
    <h1>奖惩措施</h1>
    <div class="button-group">
      <el-button type="primary" @click="openRewardDialog">添加奖惩措施</el-button>
    </div>
    <div class="date-picker-container">
      <span>筛选日期</span>
      <el-date-picker v-model="dateRange" type="datetime" placeholder="选择日期范围" @change="filterTodos" />
    </div>
    <div class="cards">
      <div v-for="reward in rewardPunishmentList" :key="reward.id" class="card">
        <h4>{{ reward.item }} <span :class="statusClass(reward.status)">{{ statusText(reward.status) }}</span></h4>
        <p>
          {{ reward.description }}
          <!-- <span :class="statusClass(todo.startDate, todo.dueDate)"></span> -->
        </p>
        <p>类别：{{ reward.type == 1 ? '奖励' : '惩罚' }}</p>
        <p>奖惩: {{ reward.description }}</p>
        <p>创建时间: {{ formatDate(reward.createdAt) }}</p>
        <div class="button-group">
          <el-button type="success">修改</el-button>
          <el-button type="danger" @click="removeRewardById(reward.id)">移除</el-button>
        </div>
      </div>
    </div>

    <el-dialog title="添加奖惩措施" v-model="rewardDialogVisible" width="600px" append-to-body>
      <el-form ref="rewardForm" :model="newReward" :rules="rewardRules" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="奖惩名称" prop="item">
              <el-input v-model="newReward.item" placeholder="请输入奖惩名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="奖惩描述" prop="description">
              <el-input v-model="newReward.description" placeholder="请输入奖惩名称" />
            </el-form-item>
          </el-col>
  
          <el-col :span="12">
            <el-form-item label="类型">
              <el-radio-group v-model="newReward.type">
                <el-radio label="1">奖励</el-radio>
                <el-radio label="2">惩罚</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="级别">
             <el-select v-model="newReward.grade" placeholder="请选择级别">
               <el-option label="一级" value="1"></el-option>
               <el-option label="二级" value="2"></el-option>
               <el-option label="三级" value="3"></el-option>
             </el-select>
            </el-form-item>
          </el-col>

        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer button-group">
          <el-button @click="rewardDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addReward">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import {getRewardPunishmentByUserId,addRewardPunishment,deleteRewardPunishment} from "@/api/rewardPunishment"

import { onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus'
const router = useRouter();

const hasToken = () => {
  // 假设 token 存储在 localStorage 中
  return localStorage.getItem('token') !== null;
};


const rewardDialogVisible = ref(false);
const newReward = ref({
  item: '',
  description: '',
  type: 1,
  grade: "",
});
//获取奖惩记录
const rewardPunishmentList = ref([]);
const getRewardPunishmentList = () => {
  getRewardPunishmentByUserId().then(res => {
    if (res.code === 200) {
      rewardPunishmentList.value = res.data;
    }
  })
}
//删除奖惩记录
const removeRewardById = (id) => {
  //  去顶删除吗？
  //  先弹窗确认
  const confirm = window.confirm('确认删除吗？');
  if (!confirm) return;

  //  再发送请求
  // 发送请求
  deleteRewardPunishment(id).then(res => {
    if (res.code === 200) {
      // 刷新列表
      getRewardPunishmentList();
    }
  });
};

const openRewardDialog = () => {
  if (!hasToken()) {
    ElMessage({
      type: 'error',
      message: '请先登录',
    });
  }else{
  rewardDialogVisible.value = true;
  }
};

const formatDate = (date) => {
  return new Date(date).toLocaleDateString();
};

//添加新的记录
const addReward = () => {
  // 创建对象
  const reward = {
    item: newReward.value.item,
    description: newReward.value.description,
    type: newReward.value.type,
    grade: newReward.value.grade,
  };
  // 发送请求
  addRewardPunishment(reward).then(res => {
    if (res.code === 200) {
      // 关闭弹窗
      rewardDialogVisible.value = false;
      // 刷新列表
      getRewardPunishmentList();
    }
  });
};


onMounted(() => {
  getRewardPunishmentList();
});

const statusClass = (status) => {
  switch (status) {
    case 0: return 'status-upcoming'; // 未开始
    case 1: return 'status-ongoing'; // 正在进行
    case 2: return 'status-completed'; // 已完成
    case 3: return 'status-failed'; // 失败
    default: return '';
  }
};

const statusText = (status) => {
  switch (status) {
    case 0: return '未开始';
    case 1: return '进行中';
    case 2: return '已完成';
    case 3: return '失败';
    default: return '';
  }
};
</script>

<style scoped>


.card-container {
  width: 95%;
  margin: 20px;
  padding: 20px;
  border: 1px solid #eaeaea;
  border-radius: 8px;
  background-color: #f9f9f9;
  /* 换行 */
  flex-wrap: wrap;
  max-width: 100%;
}

.date-picker-container {
  margin-bottom: 20px;
  margin-top: 20px;
}

.cards {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}

.card {
  /* flex: 1 1 calc(33.333% - 20px); */
  margin: 10px;
  padding: 15px;
  width: 400px;
  border: 1px solid #dcdcdc;
  border-radius: 5px;
  background-color: #ffffff;
}

.status-upcoming {
  color: gray;
  /* 未开始 */
}

.status-ongoing {
  color: green;
  /* 正在进行 */
}

.status-completed {
  color: blue;
  /* 已完成 */
}

.status-failed {
  color: red;
  /* 失败 */
}

.button-group {
  display: flex;
  /* 使用 Flexbox 布局 */
  justify-content: space-between;
  /* 均分一行 */
  margin-top: 10px;
  /* 按钮与其他内容的间距 */

  &>button {
    width: 100px;
    /* 按钮宽度 */
    margin-left: 10px;
    /* 按钮间距 */
  }
}
</style>